<!--
 * @Author: your name
 * @Date: 2022-04-28 16:22:59
 * @LastEditTime: 2022-05-07 16:31:22
 * @LastEditors: Xia_cc 978487464@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \第二阶段项目get 文件夹\html\lanmu.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印快递单</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/font/iconfont.woff">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }
        #show{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: block;
            position: relative;
        }
        #tubiaofont{
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        #tubiaofont span{
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        #tabdiv{
            width: 100%;
            background-color: white;
            overflow: hidden;
        }
        #tabdiv>p{
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }
        #tabdiv>table{
            width: 100%;
            text-align: center;
        }
        #addbtn{
            margin: 1%;
        }
        tr{
            border: 1px solid gainsboro;
            height: 50px;
        }
        #piLiangAndFenYe{
            margin: 10px 0;
            padding: 0 1%;
            height: 50px;
            position: relative;
        }
        #test1{
            padding: 5px 10px;
            margin-top: 2px;
            float: right;
        }
        #delMuch{
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            margin-top: 10px;
            /* margin-left: 10px; */
            border-radius: 2px;
            float: left;
        }
        #fenYe{
            /* width: 400px; */
            height: 30px;
            border-style: none;
            position: absolute;
            right: 10px;
        }
        #fenYe>div{
            float: right;
        }
        #fenYe .fenyepag{
            width: 90px;
            height: 30px;
            line-height: 26px;
            margin: 7px 5px;
            border-style: none;
        }
        #test1 button{
            width: 40px;
            height: 30px;
            line-height: 26px;
            margin: 0 5px;
            border-style: none;
        }
        #tanchukuang{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
        }
        #tubiaofont{
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        #tubiaofont span{
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        #popup_box{
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }
        #popup_box>p{
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }
        #popup_box>p>span{
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 78%;
            border-radius: 2px;
        }
        #popup_box>div{
            width: 30%;
            margin: 0 auto;
            padding: 30px 0;
        }
        #popup_box>div>div{
            margin-bottom: 40px;
        }
        #popup_box>div input{
            display: inline-block;
            width: 200px;
            padding: 5px;
        }
        #popup_box>div>div>span{
            display: inline-block;
            width: 60px;
        }
        #tijiao{
            margin-left: 45%;
        }
        #chongzhi{
            border: 1px solid black;
            box-sizing: border-box;
        }
        .chaKan{
            background-color: coral;
        }
        .dingdan{
            width: 150px;
            height: 38px;
            margin: 2%;
            float: left;
        }
       /*  .dingdan>select{
            width: 150px;
            height: 38px;
            margin: 2%;
            margin-bottom: 30px;
            float: left;
        } */
        #chaKanDocument{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
        }
        #showChaKan{
            width: 50%;
            text-align: left;
            display:table;
        }
        #showP{
            display:table-cell;
            vertical-align:middle;
        }
        #showP>p{
            line-height: 40px;
        }
        #yesOrNo{
            width: 130px;
            height: 38px;
            margin: 1%;
             
        }
        #yesOrNo>option{
            -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
            display: block;
            width: 130px;
            height: 58px;
            padding: 50px 10px;
            /* background-color: aquamarine; */
        }
        #tianjiaDocument{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
        }
        #tjtubiaofont{
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        #tjtubiaofont span{
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        #tjpopup_box{
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }
        #tjpopup_box>p{
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            margin-bottom: 1.5%;
            background-color: rgb(236, 239, 241);
        }
        #tjpopup_box>p>span{
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 78%;
            border-radius: 2px;
        }
        #tjpopup_box>div{
            width: 90%;
            margin: 0 auto;
            border-bottom: 1px dashed black;
            margin-bottom: 2%;
        }
        #tjpopup_box>div>div{
            width: 100%;
            margin: 2% 0;
            padding-left: 10%;
            box-sizing: border-box;
        }
        #tjpopup_box>div input{
            display: inline-block;
            width: 20%;
            height: 38px;
            box-sizing: border-box;
            border: 1px solid black;
            padding-left: 10px;
        }
        #tjpopup_box>div>div>span{
            display: inline-block;
            width: 10%;
            text-align: right;
            margin-right: 2%;
        }
        #tjpopup_box>div>div>span:nth-of-type(2){
        margin-left: 20%;
        }
        #tianjia{
            margin-left: 43%;
            width: 6%;
            height: 38px;
        }
        #tjchongzhi{
            border: 1px solid black;
            box-sizing: border-box;
            width: 6%;
            height: 38px;
            background-color: white;
            color: black
        }
        #findSpan{
            margin:1% 7%;
            height: 38px;
            float: right;
            margin-right: 7%;
        }
        #findWuLiu{
            height: 34px;
            width: 200px;
            padding:0 10px;
            /* outline: 1px solid black; */
        }
        #shuaxin{
            margin: 0 10px;
        }
        #fenYe{
            position: absolute;
            right: 10px;
        }
        #fenYe>div{
            float: right;
        }
        .cyan{
            background-color: rgb(0,150,136);
        }
    </style>
</head>
<body>
    <!-- 界面 -->
    <div id="show">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
            <span  style="font-size: 15px; ">&gt;&gt;</span>
            <span>订单</span>
            <span  style="font-size: 15px;">&gt;&gt;</span>
            <span>打印快递单</span>
            
         </div>
        <div id="tabdiv">
            <p>分类列表</p>
            <div>
                <button id="addbtn" class="layui-btn">添加订单</button><!-- 按钮的样式 -->
                <select name="DaYin"  lay-verify="" id="yesOrNo" class="selected">
                    <option size="30" value="alldingdan">全部订单</option>
                    <option value="yidayin">已打印</option>
                    <option value="weidayin">未打印</option>
                 </select>
                 <span id="findSpan"><!-- 查找&nbsp;&nbsp; -->
                    <input type="text" id="findWuLiu" placeholder="请输入你想查找的物流编号">
                    <button id="shuaxin" class="layui-btn">刷新</button>
                 </span>
            </div>
            <!-- <form action="" class="layui-form dingdan" > -->
                
            <!-- </form> -->
            <!-- <button id="queDing">查询</button> -->
             <table><!-- 表格的总宽度以定，高度以定，根据自己的表格的具体内容进行排版 -->
               
               <thead>
                    <tr>
                        <th ><input class="allCheck" type="checkbox"></th>
                        <th>ID</th>
                        <th>订单编号</th>
                        <th>物流编号</th>
                        <th>是否打印</th>
                        <th>操作员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userTbody">
                   
                </tbody>
            </table>
            <div id="piLiangAndFenYe" class="clear">
                <button id="delMuch">批量删除</button>
                <div id="fenYe" class="clear">
                    <div>
                        <button id="pagDow" class="fenyepag">下一页</button>
                    </div>
                    <div id="test1"></div><!-- 生成分页 -->
                    <div>
                        <button id="pagUp" class="fenyepag">上一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 点击修改或增加的弹出框 -->
    <div id="tanchukuang">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
            <span  style="font-size: 15px; ">&gt;&gt;</span>
            <span>订单</span>
            <span  style="font-size: 15px;">&gt;&gt;</span>
            <span>打印快递单</span>
            <span  style="font-size: 15px; ">&gt;&gt;</span>
            <span>查看</span>
        </div>
        <div id="popup_box">
            <p>查看快递信息<span id="back">返回列表</span> </p>

            <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
            <div id="showChaKan">
                <div id="showP">

                </div>
            </div>
        </div>
    </div>
   <!-- 查看页面 -->
   <div id="chaKanDocument">
       <!--  <button>返回列表</button> -->
   </div>
   <!-- 添加数据页面 -->
   <div id="tianjiaDocument">

    <div id="tjtubiaofont">
      <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>订单</span>
      <span style="font-size: 15px;">&gt;&gt;</span>
      <span>打印快递单</span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>添加订单</span>
    </div>
    <div id="tjpopup_box">
      <p id="TJbut" >添加订单信息 <span id="tjbackBut">返回列表</span> </p>

      <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
      <div>
        <div>
           <span>ID</span><input type="text" name="" id="tjiD" >
           <span>订单编号</span><input type="text" name="" id="tjfahuoren" >
        </div>
        <div>
          <span>物流编号</span><input type="text" name="" id="tjlianxifangshi" >
          <span>是否打印</span><input type="text" name="" id="tjfahuodizhi" >
        </div>
        <div>
          <span>操作员</span><input type="text" name="" id="tjshouhuodizi" >
        </div>
      </div>
      <button id="tianjia" class="layui-btn layui-btn-sm">添加</button>
      <button id="tjchongzhi" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">重置</button>
    </div>
  </div>

    <script src="../js/jQuery.3.6.0-uncompress.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/database.js"></script>
    <script src="../js/dayinkuaididan.js"></script>
</body>
</html>